<template>
  <div class="x-bar" :id="chartId" :option="option"></div>
</template>

<script>
import { formatNum } from "../util/tool";
import yangjiang from '../util/yangjiang.json'
export default {
  props: {
    chartId: {
      type: String
    },
    options: {
      type: Object
    }
  },
  data() {
    return {
      chart: "",
      option: {
        tooltip : {
          trigger: 'item',
          padding: 10,
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          formatter: function(param){
            let color = ['#00ff42','#ffc000','#ff4800','#ff0000'];
            let valObj = param.data;
            let label = '<p style="color: #00ffff; font-size: 14px;text-align: center;height: 8px">'+ valObj.name + '</p>';
            valObj.value.forEach((elem,i) => {
              label += '<br />' + '<i style="display: inline-block;width: 6px;height:6px;border-radius: 50%;margin-right:8px;vertical-align: middle;background-color:'+color[i]+'"></i>' + elem;
            })
            return label
          }
        },
        series: [{
          type: 'map',
          map: 'yangjiang',
          aspectScale: 0.9,
          label: {
            normal: {
              show: true,
              color: '#ffffff'
            },
            emphasis: {
              color: '#ffffff'
            },
          },
          zoom: 1.2,
          roam: false,
          animation: true,
          itemStyle: {
            normal: {
              areaColor: '#0093b8',
              borderColor: '#002a64'
            },
            emphasis: {
              areaColor: '#005dc6'
            },
          },
          data: this.options.sData
        }]
      }
    };
  },
  watch: {
    options: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.option.series[0].data = newVal.sData;
            this.chart.setOption(this.option);
          } else {
            this.chart.setOption(this.option);
          }
        } else {
          this.init();
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.$echarts.registerMap('yangjiang', yangjiang);
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
.x-bar {
  width: 100%;
  height: 90%;
}
</style>
